<template>
  <div class="personality-box">
    <!-- 轮播 -->
    <el-carousel :interval="4000" type="card" height="10rem">
      <el-carousel-item v-for="(item,index) in swiper" :key="index">
        <img class="swiper-item" :src="item.imageUrl" alt="" srcset="">
      </el-carousel-item>
    </el-carousel>
    <!-- 推荐歌单  跳转tab歌单路由-->
    <div class="per-song-list view-pad clear-float">
      <h4 class="cate-title">推荐歌单<i class="right-allow iconfont icon-xiayiyeqianjinchakangengduo"></i></h4>
      <div class="song-list">
        <div class="song-item" v-for="(item,index) in songList" :key="index">
          <div class="play-count">
            <i class="iconfont icon-play"></i>
            <span class="play-count-title">123万</span>
          </div>
          <img class="song-item-cover" :src="item.picUrl" alt="item.name" srcset="" id="song-item-cover">
          <div class="play-icon" id="play-icon" @click="getPlayList(item.id)">
            <i class="iconfont icon-bofangqi-bofang"></i>
          </div>
          <span class="song-item-name">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!-- 热门博客 跳转左侧博客路由 -->
    <div class="host-boke view-pad clear-float">
      <h4 class="cate-title">热门播客<i class="right-allow iconfont icon-xiayiyeqianjinchakangengduo"></i></h4>
      <ul class="host-boke-list">
        <li class="host-boke-item" v-for="(item,index) in newSong" :key="item.id">
          <img class="host-item-cover" :src="item.picUrl" alt="" srcset="">
          <div class="play-icon" @click="playSong(item.id)">
            <i class="iconfont icon-bofangqi-bofang"></i>
          </div>
          <div class="right-info">
            <p class="host-title">{{ item.name }}</p>
            <span class="host-tag">{{ item.alg }}</span>
            <p class="font"><span class="emig mar-r">{{ item.song.album.name }}</span><span class="hour mar-r"><i class="iconfont icon-zuijinbofang"></i>时长:{{item.song.bMusic.playTime | formatPlayTime}}</span></p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 独家放送 入口 -->
    <div class="private view-pad">
      <h4 class="cate-title">独家放送<i class="right-allow iconfont icon-xiayiyeqianjinchakangengduo"></i></h4>
      <div class="private-list">
        <div class="private-item" v-for="(item,index) in privateSong" :key="item.id">
          <img class="private-cover" :src="item.picUrl" :alt="item.name" srcset="">
          <p class="private-name">{{ item.name }}</p>
        </div>
      </div>
    </div>
    <!-- 推荐mv -->
    <div class="mv-view view-pad">
      <h4 class="cate-title">推荐MV<i class="right-allow iconfont icon-xiayiyeqianjinchakangengduo"></i></h4>
      <div class="mv-list safe-bottom">
        <div class="mv-item" v-for="(item,index) in mvList" :key="item.id">
          <img :src="item.picUrl" :alt="item.name" class="mv-cover">
          <p class="mv-name">{{ item.name }}</p>
          <div class="play-count">
            <i class="iconfont icon-play"></i>
            <span class="play-count-title">{{ item.playCount }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSwiper,getPersonalized,getNewSong,getPersonalizedPrivate,getHostMv ,getPlayListDetail ,getMoreSongDetail} from '@/request/Api.js'
import {mapState,mapActions,mapMutations} from 'vuex'
import { Loading } from 'element-ui';
export default {
  name:'Personality',
  created(){
    this.getSwiperData()
    this.getPersonalized()
    this.getNewSong()
    this.getPersonalizedPrivate()
    this.getHostMv()
  },
  mounted(){
  },
  data(){
    return {
      swiper:[],
      songList:[],
      newSong:[],
      // 独家放送
      privateSong:[],
      mvList:[]
    }
  },
  methods:{
    ...mapActions('Music',['getMusicCover','getMusicUrl']),
    ...mapMutations('Music',['SETMUSIC','ADDMUSICLIST']),
    async  getSwiperData(){
        const {data:res} = await getSwiper()
        if(res.code!==200){
          return
        }
        this.swiper = res.banners
    },
    async getPersonalized(){
      const {data:res} = await getPersonalized()
      if(res.code!==200){
          return
      }
      this.songList = res.result
    },
    async getNewSong(){
      const {data:res} = await getNewSong()
      if(res.code!==200){
        return
      }
      console.log(res);
      this.newSong = res.result
    },
    async getPersonalizedPrivate(){
      const {data:res} = await getPersonalizedPrivate()
      if(res.code!==200){
        return
      }
      this.privateSong = res.result
    },
    async getHostMv(){
      const {data:res} = await getHostMv()
      if(res.code!==200){
        return
      }
      this.mvList = res.result
    },
    // 播放音乐 ---- isArray判断是不是一个数组如果接收为数组的话最后一项时候再进行通知播放器加载音频
    playSong(id,isArray=true){
      this.getMusicCover(id,isArray),
      this.getMusicUrl(id,isArray)
      Promise.all([this.getMusicCover(id),this.getMusicUrl(id)]).then(val=>{
        let obj = this.formatPlayList(val[1].data[0].time,val[1].data[0].url,val[0].songs[0].name,val[0].songs[0].id,val[0].songs[0].ar[0].name,val[0].songs[0].ar[0].id)
        if(isArray){
          this.$bus.$emit('formatSteep')
          this.ADDMUSICLIST(obj)
        }else {
          this.ADDMUSICLIST(obj)
        }
      }).catch(err=>{
        console.log('失败');
      })
    },
    // 获取歌单音乐
    async getPlayList(id){
      const {data:res} = await getPlayListDetail(id)
      if(res.code!==200){
        return this.$message.error('播放歌单失败');
      }
      //  拿到当前的歌单的列表组成id数组  发起请求  歌曲详情
      let songIdArr = []
      let songArr = []
      res.songs.map(item=>{
        let obj = {}
        obj['id'] = item.id
        obj['name'] = item.name
        obj['author'] = item.ar[0].name
        obj['author_id'] = item.ar[0].id
        songArr.push(obj)
        songIdArr.push(item.id)
      })
      this.getMoreMusic(songArr,songIdArr)
    },
    // 获取多个音乐链接方法
    async getMoreMusic(songArr,songIdArr){
      const {data:res} = await getMoreSongDetail(songIdArr)
      if(res.code !== 200) {
        return 
      }
      res.data.map(item=>{
        songArr.map(idx=>{
          if(item.id==idx.id){
            idx['url'] = item.url
            idx['time'] = item.time
          }
        })
      })
      songArr.map((item,idx)=>{
        let obj = this.formatPlayList(item.time,item.url,item.name,item.id,item.author,item.author_id)
        this.ADDMUSICLIST(obj)
        if(idx == songArr.length - 1){
          this.playSong(item.id)
        }
      })
    },
    // 格式化放入歌单数组的数据
    formatPlayList(time,url,name,id,author,author_id){
        let obj = {}
        obj['time'] = time
        obj['url'] = url
        obj['name'] = name
        obj['id'] = id
        obj['author'] = author
        obj['author_id'] = author_id
        return obj
    }
  }
}
</script>

<style lang="less" scoped>
.clear-float ::after{
  content: '';
  display: initial;
  overflow: hidden;
  width: 100%;
}
.view-pad {
  padding: 0px .6rem;
  .right-allow {
    color: rgb(128, 128, 128);
    margin-left: .3rem;
  }
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  ::v-deep.swiper-item {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
  }
  .cate-title {
    display: inline-block;
    cursor: pointer;
    color: rgb(55, 55, 55);
    transition: .3s;
    margin: .5rem 0px;
    &:hover {
      color: #000;
    }
  }
  .song-list {
    overflow: hidden;
    width: 100%;
    margin-top: .4rem;
    .song-item {
      position: relative;
      float: left;
      width: 17.4%;
      margin: 1.3%;
      border-radius: 5px;
      .song-item-cover {
        cursor: pointer;
        border-radius: 5px;
        width: 100%;
        height: calc(100% - 1.6rem);
        max-height: calc(100% - 1.6rem);
        object-fit: contain;
      }
      .play-icon {
        cursor: pointer;
        transition: .3s;
        opacity: 0;
        width: 1.4rem;
        height: 1.4rem;
        line-height: 1.4rem;
        text-align: center;
        position: absolute;
        bottom: 2rem;
        right: .4rem;
        border-radius: 50%;
        background: #fff;
        .iconfont {
          font-size: 1rem;
          color: red;
        }
      }
      .song-item-name {
        display: inline-block;
        overflow: hidden;
        font-size: .8rem;
        max-height: 1.6rem;
        line-height: .8rem;
        width: 100%;
        text-overflow: ellipsis;
      }
      .play-count {
        font-size: .6rem;
        color: #fff;
        position: absolute;
        right: .4rem;
        top: .4rem;
        .icon-play {
          font-size: .6rem;
          color: #fff !important;
        }
      }
    }
  }
  #play-icon:hover {
    opacity: 1;
  }
  #song-item-cover:hover+#play-icon {
          opacity: 1;
  }
  // 热门播客
  .host-boke-list {
    overflow: hidden;
    width: 100%;
    .host-boke-item {
      position: relative;
      width: 47.4%;
      float: left;
      margin: 1.3%;
      .play-icon {
        cursor: pointer;
        transition: .3s;
        opacity: 1;
        width: 1.3rem;
        height: 1.3rem;
        line-height: 1.3rem;
        text-align: center;
        position: absolute;
        bottom: .4rem;
        left: 3.2rem;
        border-radius: 50%;
        background: #fff;
        color: red;
      }
      .host-item-cover {
        float: left;
        width: 5rem;
        height: 5rem;
        border-radius: 5px;
      }
      .right-info {
        padding-left: .3rem;
        font-size: .8rem;
        float: left;
        height: 5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .host-title {
          font-weight: 600;
        }
        .host-tag {
          font-size: .6rem;
        }
        .mar-r {
          margin-right: .5rem;
        }
        .font {
          font-size: .6rem;
        }
        .emig {
          color: rgb(189, 189, 189);
          width: 30%;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .play-number {
          color: rgb(189, 189, 189);
        }
        .hour {
          color: rgb(189, 189, 189);
        }
      }
    }
  }

  .private {
    .private-list {
      margin-top: .4rem;
      display: flex;
      .private-item {
        overflow: hidden;
        flex: 1;
        height: 12rem;
        padding: 0 .6rem;
        font-size: .8rem;
        .private-cover {
          width: 100%;
          height: 80%;
          border-radius: 5px;
        }
        .private-name {
          height: 20%;
          overflow: hidden;
        }
      }
    }
  }

  .mv-view {
    .mv-list {
      display: flex;
      margin: .4rem;
      .mv-item {
        position: relative;
        flex: 1;
        height: 14rem;
        padding: 0 .6rem;
        font-size: .8rem;
        overflow: hidden;
        .mv-cover {
          width: 100%;
          height: 80%;
          border-radius: 5px;
          object-fit: cover;
        }
        .mv-name {
          font-size: .8rem;
          width: 100%;
          height: 20%;
          max-height: 20%;
          overflow: hidden;
        }
        .play-count {
          position: absolute;
          right: .6rem;
          top: .6rem;
        }
      }
    }
  }
  .safe-bottom {
    margin-bottom: 4rem !important;
  }
  ::v-deep .path{
    stroke: red;
  }
  ::deep .el-loading-text{
    color: red;
    font-size: .7rem;
  }
</style>